<!--
 * @Description: 设置员工角色列表弹窗组件
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-11-26 11:37:35
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-21 19:13:19
-->

<template>
  <el-dialog
    title="角色列表"
    :visible.sync="_isShow"
    :close-on-click-modal="false"
  >
    <adminTable
      ref="refRoleTable"
      :form-inline="formInline"
      :api-fun="apiFunRole"
      :table-data.sync="tableData"
      :selection-list.sync="selectionList"
    >
      <!-- 搜索 -->
      <template slot="search">
        <el-form-item>
          <el-input v-model="formInline.keyword" placeholder="角色名称" />
        </el-form-item>
      </template>
      <!-- 表格操作 -->
      <template slot="column">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="#" type="index" width="50" />
        <el-table-column
          v-for="(item, index) in _tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
        />
      </template>
    </adminTable>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit"> 保存 </el-button>
      <el-button @click="_isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 组件引入
import adminTable from '@/components/admin/admin-table'
// 接口
import { permissionRole, empRoleAssignment } from '@/api/system'
// 页面配置
import { roleJClumen } from '../count'
export default {
  components: {
    adminTable
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 员工选中
    staffList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 角色选中
    roleList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      tableData: [],
      formInline: {
        keyword: ''
      },
      selectionList: [],
      apiFunRole: permissionRole,
      dialogFormVisible: false
    }
  },
  computed: {
    _isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    },
    _tableColumn: {
      get() {
        return roleJClumen
      },
      set(val) {
        this.$emit('update:roleJClumen', val)
      }
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.init()
        }
      }
    }
  },
  methods: {
    // 初始化选中状态
    init() {
      this.selectionList = this.roleList
    },
    // 保存
    async onSubmit() {
      // 角色选中ID
      const roleIds = this.selectionList.map((item) => item.roleId)
      // 保存当前选中员工的角色提交
      await empRoleAssignment({
        userIds: this.staffList,
        roleIds: roleIds
      }).then((res) => {
        const userID = JSON.parse(localStorage.getItem('userInfo')).userId
        if (this.staffList.includes(userID)) {
          this.$message({ message: '设置角色成功，请重新登录', type: 'warning' })
          this.logout()
        } else {
          this.$message({ message: '设置角色成功', type: 'success' })
          this.$emit('refresh')
          this._isShow = false
        }
      })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
